<template>
  <CesSearchForm @form="handlerSearch"></CesSearchForm>
  <Table
    size="large"
    :scroll="scroll"
    :columns="cesRecordColumns"
    :data-source="dataSource"
    :pagination="pagination"
    @change="handleTableChange"
    class="main-table"
    bordered
  >
    <template #bodyCell="{ column, record }">
      <template v-if="column.dataIndex === 'action'">
        <span class="flex justify-center">
          <Divider type="vertical" />
          <a class="font-bold" @click="viewHandler(record)">查看详情</a>
          <Divider type="vertical" />
        </span>
      </template>
    </template>
  </Table>
  <CesRecordDrawer ref="drawerRef"></CesRecordDrawer>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref } from 'vue';
import { Divider, Table, TableProps } from 'ant-design-vue';
import { getCesRecordList } from '/@/api/maintenance-center/alarm/alarm';
import CesSearchForm from '/@/views/maintenance-center/alarm-record/components/cesSearchForm.vue';
import CesRecordDrawer from '/@/views/maintenance-center/alarm-record/cesRecordDrawer.vue';

const drawerRef = ref();
const cesRecordColumns = [
  {
    title: '告警规则ID',
    dataIndex: 'alarmId',
    width: 150,
  },
  {
    title: '告警策略',
    dataIndex: 'alarmtPolicy',
    width: 150,
  },
  {
    title: '最后更新时间',
    dataIndex: 'endTime',
    width: 150,
  },
  {
    title: '告警级别',
    dataIndex: 'level',
    width: 150,
  },
  {
    title: '告警规则名称',
    dataIndex: 'name',
    width: 150,
  },
  {
    title: '告警记录ID',
    dataIndex: 'recordId',
    width: 150,
  },
  {
    title: '告警资源',
    dataIndex: 'resourceInstance',
    width: 100,
  },
  {
    title: '资源类型',
    dataIndex: 'resourceType',
    width: 100,
  },
  {
    title: '状态',
    dataIndex: 'status',
    width: 100,
  },
  {
    title: '通知主题',
    dataIndex: 'topics',
    width: 100,
  },
  {
    title: '操作',
    dataIndex: 'action',
    width: 100,
  },
];
const scroll = ref<undefined | object>(undefined);
const dataSource = ref([]);
let current = ref('1');
let size = ref('10');
const total = ref('0');
let searchParams = ref({});
const pagination = computed(() => ({
  showSizeChanger: true,

  total: total.value,
  current: current.value,
  size: size.value,
  showTotal: (total) => {
    return `共 ${total} 条`;
  },
}));

onMounted(() => {
  getCesRecordList({
    ...{
      current: current.value,
      size: size.value,
    },
  }).then((res) => {
    dataSource.value = res.items;
    total.value = res.total;
  });
});

const handleTableChange: TableProps['onChange'] = (pag) => {
  current.value = pag.current;
  size.value = pag.pageSize;
  if (Number(size) > 10) {
    scroll.value = { x: 'max-content', y: 500 };
  }
  getCesRecordList({
    ...{
      current: current.value,
      size: size.value,
    },
    ...searchParams.value,
  }).then((res) => {
    dataSource.value = res.items;
    total.value = res.total;
    current.value = pag.current;
    size.value = pag.pageSize;
  });
};

const handlerSearch = (params: any) => {
  searchParams.value = params;
  getCesRecordList({
    ...{
      current: current.value,
      size: size.value,
    },
    ...searchParams.value,
  }).then((res) => {
    dataSource.value = res.items;
    total.value = res.total;
  });
};

async function viewHandler(record: Recordable) {
  drawerRef.value.showDrawer(record);
}
</script>

<style lang="less" scoped>
/* 表格斑马样式 **/
/deep/ .ant-table-tbody tr:nth-child(2n) {
  background-color: #f8f8f8;
}

/deep/ .ant-table-thead > tr > th {
  text-align: center;
  background-color: #f5f5f5;
  color: #959595;
  font-weight: bold;
}

/deep/ .ant-table-tbody {
  text-align: center;
}

/deep/ .ant-table-tbody > tr > td {
  padding: 10px;
}

/deep/ .ant-table-thead > tr > th {
  padding: 25px;
}
</style>
